<script>

import * as echarts from 'echarts';
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

export default {
  name: 'ChartThree',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods:{open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    getData(){
      this.$axios.get('/api/data3', {

      }).then(res =>{

        if (res.data.code === 200) {
          let data1 = [];
          let data2 = [];
          for (let i = 0; i < res.data.result.length; i++) {
            data1.push(
                 res.data.result[i].schooltype
            )
            data2.push(
                res.data.result[i].count
            )
          }
          this.init(data1, data2);
        }

      }).catch(error =>{
        error = "系统出错了"
        this.open4(error)
      })
    },
    init(data1, data2) {

      var chartDom = document.getElementById("main-Chart-3");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor:"#fffdfd",
        title: {
          text: '球员学历分布',
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{a1}<br/>{b1}：{c1}'
        },
        legend: {
          data: ['球员学历']
        },
        xAxis: {
          name: "学历",
          data: data1,
          axisLabel: {         //interval设置成 0 强制显示所有标签
            interval: 0,
            rotate: 30     //可以通过旋转解决标签显示不下的问题
          },
        },
        color: ['#ccc', 'red'],
        yAxis: {
          name: "球员人数",
          axisLabel: {
            formatter: '{value}'
          }

        },
        series: [
          // 流光效果
          {
            name: '',
            type: 'bar',
            barGap: '-100%',
            // 这里不要超出实际数据
            data: data2,
            itemStyle: {
              // 颜色渐变
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#b1cae640'
                },
                {
                  offset: 1,
                  color: '#2f88e778'
                }
              ])
            }
          },
          // 背景，要显示的数据
          {
            name: '球员学历',
            type: 'bar',
            // 充当背景
            z: '-1',
            // 真实数据
            data: data2,
            itemStyle: {
              color: '#14eca4'
            }
          }
        ]
      };
      /*
        先将流光数据变为 0，再将真实数据赋值给流光数据
        每次都执行 setOption 更新数据，实现动画效果
      */
      function run1() {
        let length = option.series[0].data.length;
        let data = new Array(length).fill[0];
        let newD = { series: [{ data }] };
        myChart.setOption(newD);
      }
      function run2() {
        let data = data2;
        let newD = { series: [{ data }] };
        myChart.setOption(newD);
      }
      setInterval(function () {
        run1();
      }, 1000);
      setInterval(function () {
        run2();
      }, 1000);

      option && myChart.setOption(option);
    }
  }
}

</script>

<template>
  <div id="main-Chart-3"></div>
</template>

<style scoped>
#main-Chart-3 {
  height: 100%;
  width: 100%;
}
</style>